<template>
  <div>
    <el-container>
      <el-aside width="200px" style="background-color: #409EFF">
        <div>
          这是组件
        </div>
        <draggable v-model="arr1" :options="optionsA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass">
          <transition-group :style="style">
            <el-button
              class="itemBtn"
               v-for="(item,index) in arr1"
              :key="item.id + 'arr1' + index"
            >{{item.name}}</el-button>
          </transition-group>
        </draggable>
      </el-aside>
      <el-main>
        <div>这是可视化</div>
        <draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass">
          <transition-group :style="style">
            <div
              class="item"
              v-for="(item,index) in arr2"
              :key="item.id + 'arr2' + index"
            >{{item.name}}</div>
          </transition-group>
        </draggable>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: "DesignIndex",
  components: {
    draggable,
  },
  data(){
    return {
      optionsA:{
        group:{name: 'site',pull:'clone',put:false},
        sort: false,
      },
      groupB:{
        name:'site',
        pull:true,
      },
      //定义要被拖拽对象的数组
      arr1:[
        {
          id:1,name:'输入框',
        },
        {
          id:2,name:'图片',
        },
      ],
      arr2:[], //空数组
      //空数组之在的样式，设置了这个样式才能拖入
      style:'min-height:120px;display: block;'
    }
  }
}
</script>

<style scoped lang="scss">
.itemBtn{
  display: block;
  width: 100%;
  margin: 0px;
  margin-top: 10px;
}
</style>
